<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎页面</title>
    <!-- vue.js -->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <!-- element引入样式 -->
    <link rel="stylesheet" href="element/index.css">
    <!-- element引入组件库 -->
    <script type="text/javascript" src="element/index.js"></script>
    <style>
        body{
            margin: 0;
        }
        .welcome-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .welcome-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .welcome-title {
            font-size: 2.5em;
            margin-bottom: 20px;
            font-weight: 300;
        }
        .username {
            font-size: 1.8em;
            color: #ffd700;
            font-weight: bold;
            margin: 20px 0;
        }
        .welcome-message {
            font-size: 1.2em;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        .loading-spinner {
            margin: 20px 0;
        }
        .error-message {
            color: #ff6b6b;
            font-size: 1.1em;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="welcome-container">
            <div class="welcome-card">
                <!-- 加载状态 -->
                <div v-if="loading" class="loading-spinner">
                    <el-loading-spinner></el-loading-spinner>
                    <p>正在加载用户信息...</p>
                </div>
                
                <!-- 欢迎内容 -->
                <div v-else-if="username">
                    <h1 class="welcome-title">欢迎回来！</h1>
                    <div class="username">{{ username }}</div>
                    <p class="welcome-message">很高兴再次见到您，祝您使用愉快！</p>
                    <el-button type="primary" size="large" @click="refreshUserInfo">
                        刷新信息
                    </el-button>
                </div>
                
                <!-- 错误状态 -->
                <div v-else class="error-message">
                    <h2>认证失败</h2>
                    <p>{{ errorMessage || '无法获取用户信息，请重新登录' }}</p>
                    <el-button type="danger" @click="retryAuth">
                        重试
                    </el-button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username: '', // 用户名
                loading: true, // 加载状态
                errorMessage: '' // 错误信息
            },
            mounted:function(){
                this.initWithAuth();
            },
            methods:{
                // 认证初始化
                async initWithAuth(){
                    try {
                        this.loading = true;
                        this.errorMessage = '';
                        await AuthManager.get_user();
                        this.page_init();
                    } catch (error) {
                        console.error('认证失败:', error);
                        this.errorMessage = error.message || '认证失败';
                        this.loading = false;
                    }
                },
                
                // 业务逻辑
                page_init(){
                    this.getUserInfo();
                },
                
                // 获取用户信息
                getUserInfo(){
                    this.loading = true;
                    axios({
                        method:'get',
                        url:'/demo1/get_user', // 假设的用户信息接口
                    }).then(
                        response => {
                            if(response.data.status){
                                this.username = response.data.url.name || response.data.data.name;
                                this.show_message('欢迎回来，' + this.username + '！');
                            } else {
                                this.errorMessage = response.data.status_info || '获取用户信息失败';
                                this.warning_message(this.errorMessage);
                            }
                            this.loading = false;
                        }
                    ).catch(error => {
                        console.error('获取用户信息失败:', error);
                        this.errorMessage = '网络异常，无法获取用户信息';
                        this.loading = false;
                        this.warning_message(this.errorMessage);
                    });
                },
                
                // 刷新用户信息
                refreshUserInfo(){
                    this.getUserInfo();
                },
                
                // 重试验证
                retryAuth(){
                    this.initWithAuth();
                },
                
                //基础逻辑
                show_message(info) {
                    const h = this.$createElement;
                    this.$notify({
                        title: '提示',
                        message: h('i', { style: 'color: teal'}, info)
                    });
                },
                
                warning_message(info) {
                    this.$message({
                        showClose: true,
                        message: info,
                        type: 'warning'
                    });
                }
            }
        })
    </script>
</body>
</html>